```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSP技术全解析 - 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #222;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            position: relative;
            padding-left: 1.5rem;
        }
        .section-title:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.3em;
            height: 1em;
            width: 0.5rem;
            background: #6e8efb;
            border-radius: 3px;
        }
        .code-block {
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
            padding: 1rem;
            border-radius: 0 4px 4px 0;
            font-family: monospace;
            overflow-x: auto;
        }
        .highlight {
            background-color: #fff9c4;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 animate-fade-in">JSP技术全解析</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">从基础到实践，掌握Java Server Pages的核心概念与最佳实践</p>
            <div class="flex justify-center space-x-4">
                <a href="#jsp-intro" class="px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-opacity-90 transition">开始学习</a>
                <a href="#jsp-mindmap" class="px-6 py-3 bg-white bg-opacity-20 rounded-lg font-medium hover:bg-opacity-30 transition">查看导图</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl py-12 px-4">
        <!-- What is JSP -->
        <section id="jsp-intro" class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">什么是JSP</h2>
                <div class="prose max-w-none">
                    <p class="text-lg mb-4">
                        <span class="font-semibold">JSP全称是Java Server Pages</span>，它和servlet技术一样，都是SUN公司定义的一种用于开发动态web资源的技术，统称为JSP/Servlet规范。
                    </p>
                    <p class="mb-4">
                        JSP实际上就是Servlet，这门技术的最大的特点在于，写JSP就像在写HTML，但它相比HTML而言，HTML只能为用户提供静态数据，而JSP技术允许在页面中嵌套Java代码，为用户提供动态数据。
                    </p>
                    <div class="code-block my-6">
                        // JSP示例：内嵌Java代码<br>
                        &lt;% Date now = new Date(); %&gt;<br>
                        当前时间: &lt;%= now %&gt;
                    </div>
                </div>
            </div>
        </section>

        <!-- JSP Best Practices -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSP最佳实践</h2>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        不管是JSP还是Servlet，虽然都可以用于开发动态web资源。但由于这2门技术有各自的特点：
                    </p>
                    <ul class="list-disc pl-6 space-y-2 mb-6">
                        <li><span class="font-medium">Servlet</span> 只负责响应请求产生数据，并把数据通过转发技术带给JSP</li>
                        <li><span class="font-medium">JSP</span> 负责数据的显示</li>
                    </ul>
                    <p>
                        在长期的软件实践中，人们逐渐把Servlet作为web应用中的控制器组件来使用，而把JSP技术作为数据显示模板来使用。
                    </p>
                </div>
            </div>
        </section>

        <!-- JSP Syntax -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSP语法</h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">基本语法元素</h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP模版元素</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP表达式</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP脚本片断</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP注释</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP指令</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP标签</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-indigo-500 mt-1 mr-2"></i>
                                <span>JSP内置对象</span>
                            </li>
                        </ul>
                    </div>
                    <div class="border-l pl-6 border-gray-200">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">常见问题</h3>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="font-medium text-blue-800 mb-2"><i class="fas fa-question-circle mr-2"></i>如何查找JSP页面中的错误？</p>
                            <p class="text-blue-700">可以通过查看服务器日志或使用JSP调试工具来定位错误位置和原因。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JSP Template Elements -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP模板元素</h3>
                <div class="prose max-w-none">
                    <p>
                        JSP页面中的HTML内容称之为JSP模版元素。JSP模版元素定义了网页的基本骨架，即定义了页面的结构和外观。
                    </p>
                </div>
            </div>

            <!-- JSP Expressions -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP脚本表达式</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP脚本表达式（expression）用于将程序数据输出到客户端。
                    </p>
                    <div class="code-block my-4">
                        语法：&lt;%= 变量或表达式 %&gt;<br><br>
                        举例：<br>
                        当前时间: &lt;%= new java.util.Date() %&gt;
                    </div>
                    <div class="bg-yellow-50 p-4 rounded-lg mt-4">
                        <p class="font-medium text-yellow-800"><i class="fas fa-exclamation-triangle mr-2"></i>注意：JSP脚本表达式中的变量或表达式后面不能有分号</p>
                    </div>
                </div>
            </div>

            <!-- JSP Scriptlets -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP脚本片段</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP脚本片断，用于在JSP页面中编写多行Java代码。
                    </p>
                    <div class="code-block my-4">
                        语法：<br>
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;多行java代码<br>
                        %&gt;
                    </div>
                    <div class="bg-yellow-50 p-4 rounded-lg mt-4">
                        <p class="font-medium text-yellow-800 mb-2"><i class="fas fa-exclamation-triangle mr-2"></i>注意事项：</p>
                        <ul class="list-disc pl-6">
                            <li>JSP脚本片断中只能出现java代码，不能出现其它模板元素</li>
                            <li>JSP脚本片断中的Java代码必须严格遵循Java语法，例如，每执行语句后面必须用分号（;）结束。</li>
                        </ul>
                    </div>
                    <div class="mt-6">
                        <h4 class="font-semibold text-lg mb-2">案例：</h4>
                        <ol class="list-decimal pl-6 space-y-2">
                            <li>在jsp脚本中定义一个时间变量，然后采用脚本表达式输出该变量</li>
                            <li>循环打印100行的表格</li>
                        </ol>
                    </div>
                </div>
            </div>

            <!-- JSP Declarations -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP声明</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP页面中编写的所有代码，默认会翻译到servlet的service方法中,而Jsp声明中的java代码被翻译到_jspService方法的外面。
                    </p>
                    <div class="code-block my-4">
                        语法：<br>
                        &lt;%!<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;java代码<br>
                        %&gt;
                    </div>
                </div>
            </div>

            <!-- JSP Comments -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP注释</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP注释的格式：&lt;%-- 注释信息 --%&gt;<br>
                        JSP引擎在将JSP页面翻译成Servlet程序时，忽略JSP页面中被注释的内容。
                    </p>
                    <div class="bg-yellow-50 p-4 rounded-lg">
                        <p class="font-medium text-yellow-800"><i class="fas fa-exclamation-triangle mr-2"></i>注意：它与HTML中的注释有什么不同</p>
                    </div>
                </div>
            </div>

            <!-- JSP Directives -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP指令</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。
                    </p>
                    <p class="mb-4">
                        在JSP 2.0规范中共定义了三个指令：
                    </p>
                    <ul class="list-disc pl-6 mb-6 space-y-2">
                        <li>page指令</li>
                        <li>include指令</li>
                        <li>taglib指令</li>
                    </ul>
                    <div class="code-block my-4">
                        <span class="font-bold text-red-600">JSP指令的基本语法格式：</span><br>
                        &lt;%@ 指令 属性名="值" %&gt;<br><br>
                        举例：<br>
                        &lt;%@ page contentType="text/html;charset=utf-8"%&gt;
                    </div>
                    <p class="mt-4">
                        如果一个指令有多个属性，这多个属性可以写在一个指令中，也可以分开写。
                    </p>
                </div>
            </div>

            <!-- Page Directive -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">JSP的page指令</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        page指令用于定义JSP页面的各种属性，无论page指令出现在JSP页面中的什么地方，它作用的都是整个JSP页面，为了保持程序的可读性和遵循良好的编程习惯，page指令最好是放在整个JSP页面的起始位置。
                    </p>
                    <div class="code-block my-4">
                        JSP 2.0规范中定义的page指令的完整语法：<br>
                        &lt;%@ page <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-red-600">[ import="{package.class | package.*}, ..." ]</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-red-600">[ errorPage="relative_url" ]</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-red-600">[ isErrorPage="true | false" ]</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-red-600">[ contentType= "text/html ; charset=ISO-8859-1" ]</span><br>
                        %&gt;
                    </div>
                    <p class="mt-4">
                        可以在一条page指令的import属性中引入多个类或包，其中的每个包或类之间使用逗号分隔：
                    </p>
                    <div class="code-block my-4">
                        &lt;%@ page import="java.util.Date,java.sql.*,java.io.*"%&gt;
                    </div>
                </div>
            </div>

            <!-- Include Directive -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">include指令</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        include指令用于引入其它JSP页面，如果使用include指令引入了其它JSP页面，那么JSP引擎将把这两个JSP翻译成一个servlet。所以include指令引入通常也称之为<span class="font-bold text-red-600">静态引入</span>。
                    </p>
                    <div class="code-block my-4">
                        语法：<br>
                        &lt;%@ include file="被包含页面的绝对URL或相对URL"%&gt;
                    </div>
                    <p class="mt-4">
                        其中的file属性用于指定被引入文件的路径。路径以"/"开头，表示代表当前web应用。
                    </p>
                    <div class="bg-yellow-50 p-4 rounded-lg mt-4">
                        <p class="font-medium text-yellow-800"><i class="fas fa-exclamation-triangle mr-2"></i>细节：</p>
                        <ul class="list-disc pl-6">
                            <li>被引入的文件必须遵循JSP语法</li>
                            <li>被引入的文件可以使用任意的扩展名，即使其扩展名是html，JSP引擎也会按照处理jsp页面的方式处理它里面的内容</li>
                            <li class="font-bold text-red-600">为了见明知意，JSP规范建议使用.jspf（JSP fragments）作为静态引入文件的扩展名</li>
                        </ul>
                    </div>
                    <div class="mt-6">
                        <h4 class="font-semibold text-lg mb-2">案例：</h4>
                        <p>网页头部显示当前时间，这个头部信息需要复用，那么就可以在多个页面进行引入操作</p>
                    </div>
                </div>
            </div>

            <!-- Taglib Directive -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">taglib指令</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        taglib指令用于在JSP页面中导入标签库
                    </p>
                    <div class="code-block my-4">
                        &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
                    </div>
                </div>
            </div>

            <!-- JSP Built-in Objects -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSP的内置对象</h2>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        每个JSP页面在第一次被访问时，WEB容器都会把请求交给JSP引擎（即一个Java程序）去处理。JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet)，然后按照servlet的调用方式进行调用。
                    </p>
                    <p class="mb-4">
                        由于JSP第一次访问时会翻译成servlet，所以第一次访问通常会比较慢，但第二次访问，JSP引擎如果发现JSP没有变化，就不再翻译，而是直接调用，所以程序的执行效率不会受到影响。
                    </p>
                    <p class="mb-6">
                        JSP引擎在调用JSP对应的_jspServlet时，会传递或创建9个与web开发相关的对象供_jspServlet使用。JSP技术的设计者为便于开发人员在编写JSP页面时获得这些web对象的引用，特意定义了9个相应的变量：
                    </p>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-2"><i class="fas fa-cube mr-2"></i>核心对象</h4>
                            <ul class="space-y-1">
                                <li class="text-red-600 font-medium">request</li>
                                <li class="text-red-600 font-medium">response</li>
                                <li>config</li>
                                <li class="text-red-600 font-medium">application</li>
                                <li>exception</li>
                            </ul>
                            <p class="text-xs text-gray-500 mt-2">(只有在page指令中具有属性isErrorPage="true"时才有效)</p>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-2"><i class="fas fa-cube mr-2"></i>会话与页面</h4>
                            <ul class="space-y-1">
                                <li class="text-red-600 font-medium">session</li>
                                <li>page</li>
                            </ul>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-2"><i class="fas fa-cube mr-2"></i>输出与上下文</h4>
                            <ul class="space-y-1">
                                <li class="text-red-600 font-medium">out</li>
                                <li>pageContext</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PageContext Object -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">pageContext对象和作用域</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        pageContext对象是JSP技术中最重要的一个对象，它代表JSP页面的运行环境，这个对象不仅封装了对其它8大隐式对象的引用，它自身还是一个域对象，可以用来保存数据。
                    </p>
                    <div class="code-block my-4">
                        getException方法返回exception隐式对象<br>
                        getPage方法返回page隐式对象<br>
                        getRequest方法返回request隐式对象<br>
                        getResponse方法返回response隐式对象<br>
                        getServletConfig方法返回config隐式对象<br>
                        getServletContext方法返回application隐式对象<br>
                        getSession方法返回session隐式对象<br>
                        getOut方法返回out隐式对象
                    </div>
                </div>
            </div>

            <!-- PageContext as Scope Object -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">pageContext作为域对象</h3>
                <div class="prose max-w-none">
                    <h4 class="font-semibold text-lg mb-2">pageContext对象的方法</h4>
                    <div class="code-block my-4">
                        public void setAttribute(java.lang.String name,java.lang.Object value)<br>
                        public java.lang.Object getAttribute(java.lang.String name)<br>
                        public void removeAttribute(java.lang.String name)
                    </div>
                    <h4 class="font-semibold text-lg mt-6 mb-2">pageContext对象中还封装了访问其它域的方法</h4>
                    <div class="code-block my-4">
                        public java.lang.Object getAttribute(java.lang.String name,int scope)<br>
                        public void setAttribute(java.lang.String name, java.lang.Object value,int scope)<br>
                        public void removeAttribute(java.lang.String name,int scope)
                    </div>
                    <h4 class="font-semibold text-lg mt-6 mb-2">代表各个域的常量</h4>
                    <div class="code-block my-4">
                        PageContext.APPLICATION_SCOPE<br>
                        PageContext.SESSION_SCOPE<br>
                        PageContext.REQUEST_SCOPE<br>
                        PageContext.PAGE_SCOPE
                    </div>
                </div>
            </div>
        </section>

        <!-- JSP Tags -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSP标签</h2>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        JSP标签也称之为Jsp Action(JSP动作)元素，它用于在Jsp页面中提供业务逻辑功能，避免在JSP页面中直接编写java代码，造成jsp页面难以维护。
                    </p>
                    <div class="grid md:grid-cols-3 gap-6 mt-6">
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-code mr-2 text-blue-500"></i>jsp:include标签
                            </h4>
                            <p>用于把另外一个资源的输出内容插入进当前JSP页面的输出内容之中</p>
                        </div>
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-code mr-2 text-blue-500"></i>jsp:forward标签
                            </h4>
                            <p>用于把请求转发给另外一个资源</p>
                        </div>
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-code mr-2 text-blue-500"></i>jsp:param标签
                            </h4>
                            <p>用于向引入或转发的资源传递参数</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- jsp:include Tag -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">jsp:include标签</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        &lt;jsp:include&gt;标签用于把另外一个资源的输出内容插入进当前JSP页面的输出内容之中，这种在JSP页面执行时的引入方式称之为<span class="font-bold text-red-600">动态引入</span>。
                    </p>
                    <div class="code-block my-4">
                        语法：<br>
                        &lt;jsp:include page="relativeURL" /&gt;<br><br>
                        page属性用于指定被引入资源的相对路径
                    </div>
                </div>
            </div>

            <!-- jsp:forward Tag -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">jsp:forward标签</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        &lt;jsp:forward&gt;标签用于把请求转发给另外一个资源。
                    </p>
                    <div class="code-block my-4">
                        语法：<br>
                        &lt;jsp:forward page="relativeURL | &lt;%=expression%&gt;" /&gt;<br><br>
                        page属性用于指定请求转发到的资源的相对路径
                    </div>
                </div>
            </div>

            <!-- jsp:param Tag -->
            <div class="mt-8 card bg-white rounded-xl p-8 shadow-md">
                <h3 class="text-2xl font-bold mb-4 section-title">jsp:param标签</h3>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        当使用&lt;jsp:include&gt;和&lt;jsp:forward&gt;标签引入或将请求转发给其它资源时，可以使用&lt;jsp:param&gt;标签向这个资源传递参数。
                    </p>
                    <div class="code-block my-4">
                        语法1：<br>
                        &lt;jsp:include page="relativeURL | &lt;%=expression%&gt;"&gt;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&lt;jsp:param name="parameterName" value="parameterValue|&lt;%= expression %&gt;" /&gt;<br>
                        &lt;/jsp:include&gt;<br><br>
                        语法2：<br>
                        &lt;jsp:forward page="relativeURL | &lt;%=expression%&gt;"&gt;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&lt;jsp:param name="parameterName" value="parameterValue|&lt;%= expression %&gt;" /&gt;<br>
                        &lt;/jsp:forward&gt;
                    </div>
                </div>
            </div>
        </section>

        <!-- JSP Mindmap -->
        <section id="jsp-mindmap" class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSP导图</h2>
                <div class="border rounded-lg p-4 bg-gray-50">
                    <div class="mermaid">
                        graph TD
                        A[JSP技术] --> B[基本概念]
                        A --> C[语法元素]
                        A --> D[内置对象]
                        A --> E[标签]
                        A --> F[最佳实践]
                        
                        B --> B1[Java Server Pages]
                        B --> B2[动态Web资源]
                        B --> B3[JSP/Servlet规范]
                        
                        C --> C1[JSP模板]
                        C --> C2[JSP表达式]
                        C --> C3[JSP脚本]
                        C --> C4[JSP声明]
                        C --> C5[JSP注释]
                        C --> C6[JSP指令]
                        
                        C6 --> C61[page指令]
                        C6 --> C62[include指令]
                        C6 --> C63[taglib指令]
                        
                        D --> D1[request]
                        D --> D2[response]
                        D --> D3[session]
                        D --> D4[application]
                        D --> D5[config]
                        D --> D6[out]
                        D --> D7[page]
                        D --> D8[pageContext]
                        D --> D9[exception]
                        
                        E --> E1[jsp:include]
                        E --> E2[jsp:forward]
                        E --> E3[jsp:param]
                        
                        F --> F1[Servlet控制器]
                        F --> F2[JSP视图]
                        F --> F3[MVC模式]
                    </div>
                </div>
                <div class="mt-4 text-right">
                    <a href="https://www.yuque.com/attachments/yuque/0/2023/xmind/21449790/1692788601877-14826aca-84a0-4bd3-8f14-bc42b2767237.xmind" class="text-blue-600 hover:underline">
                        <i class="fas fa-download mr-1"></i>下载完整思维导图
                    </a>
                </div>
            </div>
        </section>

        <!-- EL Expression -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">EL表达式</h2>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        EL表达式：expression language 表达式语言，它不是一种开发语言，是JSP中<span class="font-bold text-red-600">获取数据</span>的一种规范。
                    </p>
                    <div class="bg-yellow-50 p-4 rounded-lg">
                        <p class="font-medium text-yellow-800"><i class="fas fa-exclamation-triangle mr-2"></i>注意：EL表达式查找的范围顺序，以及如何获取请求的参数信息</p>
                    </div>
                    
                    <h3 class="text-xl font-semibold mt-8 mb-4">案例一：基本使用</h3>
                    <div class="code-block my-4">
                        &lt;%-- JSP脚本来存放值，然后采用EL表达式来获取值 --%&gt;<br>
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;request.setAttribute("el", "来自request域存放的数据");<br>
                        %&gt;<br><br>
                        &lt;%-- 通过EL表达式获取该值 --%&gt;<br>
                        ${el}<br>
                        &lt;%=request.getAttribute("el") %&gt;
                    </div>
                    <p class="mt-4">通过设置多个区域的数据，来观察EL表达式获取值的顺序。另外，怎样采用EL表达式获取到请求参数？</p>
                    
                    <h3 class="text-xl font-semibold mt-8 mb-4">案例二：null处理</h3>
                    <p>EL表达式对于null情况的处理，即不存在对应的key时，是怎么显示的？</p>
                    
                    <h3 class="text-xl font-semibold mt-8 mb-4">案例三：属性导航</h3>
                    <p>对象获取属性，获取List的元素，获取Map的元素</p>
                    <div class="code-block my-4">
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;Book book = new Book(1001,"Java探索之旅",99.9);<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;request.setAttribute("book", book);<br>
                        %&gt;<br>
                        ${book.bookName}<br><br>
                        
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;List&lt;Book&gt; list = new ArrayList&lt;Book&gt;();<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;list.add(new Book(1001,"Java探索之旅",99.9));<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;list.add(new Book(1002,"技术探索之旅",199.9));<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;list.add(new Book(1003,"宇宙探索之旅",999.9));<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;request.setAttribute("list", list);<br>
                        %&gt;<br>
                        ${list[0].bookName}<br><br>
                        
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;Map&lt;String,String&gt; map = new HashMap&lt;String,String&gt;();<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;map.put("1001", "目标一：每天比昨天懂得多一点");<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;map.put("1002", "目标二：每个星期有一个专项的提升");<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;map.put("1003", "目标三：每个月有一个系统的提升");<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;request.setAttribute("map", map);<br>
                        %&gt;<br>
                        ${map["1001"]}
                    </div>
                    
                    <h3 class="text-xl font-semibold mt-8 mb-4">案例四：三元运算符</h3>
                    <p>三元运算符结合结果来做信息提示</p>
                    <div class="code-block my-4">
                        ${empty cart}<br>
                        ${empty cart ? "您的购物车尚无商品" : "您的购物车商品信息如下："}
                    </div>
                    
                    <h4 class="font-semibold mt-6 mb-2">数据的回显</h4>
                    <div class="code-block my-4">
                        &lt;%<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;request.setAttribute("sex", 1);<br>
                        %&gt;<br>
                        &lt;input type="radio" name="sex" value="1" ${sex==1 ?"checked='checked'" : ""}/&gt;男<br>
                        &lt;input type="radio" name="sex" value="0" ${sex==0 ? "checked='checked'" : ""}/&gt;女
                    </div>
                </div>
            </div>
        </section>

        <!-- JSTL -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">JSTL</h2>
                <div class="prose max-w-none">
                    <h3 class="text-xl font-semibold mb-4">什么是JSTL</h3>
                    <p class="mb-4">
                        JSTL（JavaServerPages Standard Tag Library）JSP标准标签库
                    </p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-4">JSTL的作用</h3>
                    <p class="mb-4">
                        使用JSTL实现JSP页面中逻辑处理。如判断、循环等。
                    </p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-4">使用JSTL</h3>
                    <ol class="list-decimal pl-6 space-y-2">
                        <li>在JSP页面添加taglib指令</li>
                        <div class="code-block my-4">
                            &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
                        </div>
                        <li>使用JSTL标签</li>
                        <div class="code-block my-4">
                            &lt;c:if test="${empty cart}"&gt;您的购物车尚无商品&lt;/c:if&gt;
                        </div>
                    </ol>
                    
                    <h3 class="text-xl font-semibold mt-8 mb-4">常用标签介绍</h3>
                    <div class="grid md:grid-cols-3 gap-6">
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-tags mr-2 text-blue-500"></i>通用标签
                            </h4>
                            <ul class="space-y-2">
                                <li>set</li>
                                <li>out</li>
                                <li>remove</li>
                            </ul>
                        </div>
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-tags mr-2 text-blue-500"></i>条件标签
                            </h4>
                            <ul class="space-y-2">
                                <li>if</li>
                                <li>choose</li>
                            </ul>
                        </div>
                        <div class="border p-4 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 flex items-center">
                                <i class="fas fa-tags mr-2 text-blue-500"></i>迭带标签
                            </h4>
                            <ul class="space-y-2">
                                <li>foreach</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-2">案例一：实现普通for循环</h4>
                        <div class="code-block my-4">
                            &lt;c:forEach var="i" begin="1" end="10" step="1"&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;${i}<br>
                            &lt;/c:forEach&gt;
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-2">案例二：遍历集合数据</h4>
                        <p>实现隔行换色的效果</p>
                        <div class="code-block my-4">
                            &lt;table&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;c:forEach items="${books}" var="book" varStatus="status"&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class="${status.count % 2 == 0 ? 'even' : 'odd'}"&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;${book.title}&lt;/td&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;${book.price}&lt;/td&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/c:forEach&gt;<br>
                            &lt;/table&gt;
                        </div>
                    </div>
                </div>
                <div class="mt-6 text-right">
                    <a href="https://www.yuque.com/attachments/yuque/0/2023/xmind/21449790/1692788640081-6d09a9a3-ee7e-4ae0-b90e-500b5672bd8e.xmind" class="text-blue-600 hover:underline">
                        <i class="fas fa-download mr-1"></i>下载JSTL思维导图
                    </a>
                </div>
            </div>
        </section>

        <!-- Formatting -->
        <section class="mb-16">
            <div class="card bg-white rounded-xl p-8 shadow-md">
                <h2 class="text-3xl font-bold mb-6 section-title">格式化</h2>
                <div class="prose max-w-none">
                    <p class="mb-4">
                        首先，引入格式化标签库：
                    </p>
                    <div class="code-block my-4">
                        &lt;%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%&gt;
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-2">案例一：日期格式化</h4>
                        <p>比如对象保存的属性为日期类型，希望展示的结果是我们期望的日期格式</p>
                        <div class="code-block my-4">
                            &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %&gt;<br>
                            &lt;% request.setAttribute("now", new java.util.Date()); %&gt;<br>
                            &lt;fmt:formatDate value="${now}" pattern="yyyy-MM-dd HH:mm:ss"/&gt;
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-2">案例二：格式化小数</h4>
                        <p>保留两位小数点</p>
                        <div class="code-block my-4">
                            &lt;fmt:formatNumber value="${price}" pattern="#.##"/&gt;
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-2">案例三：百分比格式化</h4>
                        <div class="code-block my-4">
                            &lt;fmt:formatNumber value="${ratio}" type="percent"/&gt;
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                    <p>探索技术，分享知识</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300">
                        <i class="fas fa-globe mr-1"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-sm text-center text-gray-500">
                &copy; 2023 技术小馆. All rights reserved.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```